<template>
    <h1>购物车</h1>

    <button @click="addGoodsBtn">添加商品</button>
    <!-- 添加商品弹出框 -->
    <showmsg v-if="addGoodsFlag" @cancelBtn="cancelAddBtn" @okBtn="okAddBtn" />

    <!-- 商品列表 -->
    <ul class="list_ul">
        <li v-for="(item, index) in list" :key="index">
            商品名: {{ item.name }} --- 商品价格: {{ item.price }} ---
            <button @click="editBtn(index)">编辑</button> ---
            <button @click="delBtn(index)">删除</button>
        </li>
    </ul>

    <!-- 编辑商品弹框 -->
    <showmsg
        v-if="editGoodsFlag"
        @cancelBtn="cancelEditBtn"
        @okBtn="okEditBtn"
    />

    <!-- 删除确认弹窗 -->
    <showmsg
        :isDel="true"
        v-if="delGoodsFlag"
        @cancelBtn="cancelDelBtn"
        @okBtn="okDelBtn"
    />
</template>

<script>
import goods from "./goods";
import showmsg from "./components/showmsg.vue";
export default {
    data() {
        return {
            list: [],
            addGoodsFlag: false,
            editGoodsFlag: false,
            editIndex: 0,
            delGoodsFlag: false,
            delIndex: 0,
        };
    },
    methods: {
        // 10. 删除弹框确定按钮
        async okDelBtn() {
            // 10.1 调用删除方法, 删除对应的数据
            await goods.delGoods(this.delIndex)

            // 10.2 获取最新的数据, 更新页面
            await this.getGoods()

            // 10.3 关闭删除弹框
            this.cancelDelBtn()
        },

        // 9. 删除弹框取消按钮
        cancelDelBtn() {
            this.delGoodsFlag = false;
        },

        // 8. 点击删除按钮
        delBtn(i) {
            this.delGoodsFlag = true;
            this.delIndex = i
        },

        // 7. 编辑弹出框的确定按钮
        async okEditBtn(fromData) {
            // 7.1 调用更新方法, 修改数据
            await goods.updateGoods(this.editIndex, fromData);

            // 7.2 获取最新的数据, 更新页面
            await this.getGoods();

            // 7.3 关闭弹出框
            // this.editGoodsFlag = false
            this.cancelEditBtn();
        },

        // 6. 编辑弹出框的取消按钮
        cancelEditBtn() {
            this.editGoodsFlag = false;
        },

        // 5. 点击编辑按钮
        editBtn(i) {
            // 5.1 打开编辑弹出框
            this.editGoodsFlag = true;

            // 5.2 存储现在点击了哪一个商品 (存的是商品对应的下标)
            this.editIndex = i;
        },

        // 4. 添加商品的确定按钮
        async okAddBtn(goodsInfo) {
            await goods.createGoods(goodsInfo);
            await this.getGoods();

            this.addGoodsFlag = false;
            // this.cancelAddBtn()
        },

        // 3. 添加商品的取消按钮
        cancelAddBtn() {
            this.addGoodsFlag = false;
        },

        // 2. 点击 添加按钮
        addGoodsBtn() {
            this.addGoodsFlag = true;
        },

        // 1. 获取商品
        async getGoods() {
            this.list = await goods.getGoods();

            console.log(this.list);
        },
    },
    mounted() {
        // 0. 组件挂载完毕的时候, 获取一下数据
        this.getGoods();
    },
    components: {
        showmsg,
    },
};
</script>

<style>
* {
    padding: 0;
    margin: 0;
}
html,
body,
#app {
    width: 100%;
    height: 100%;
}
</style>
